<template>
  <div>
    <div id="map" style="position: absolute; width: 100vw; height: 100vh"></div>
    <div class="top">
      <img src="http://3d.kuxia.top/assets/top.41ed061a.png" alt="" />
      <img
        src="../assets/主页.png"
        style="width: 20px; height: 20px; position: absolute; top: 8%; left: 1%"
      />
      <img src="../assets/应急准备.png" alt="" class="navList back" />
      <img src="../assets/风险防控.png" alt="" class="navList" />
      <img src="../assets/指挥救援.png" alt="" class="navList" />
      <img src="../assets/灾后恢复.png" alt="" class="navList" />
      <div class="top_time">
        <p>{{ d }}</p>
      </div>
    </div>
    <div class="left-nav">
      <div class="left-navs">
        <ul>
          <li class="li_on">宣传培训</li>
          <li>应急预案</li>
          <li>指挥体系</li>
          <li>应急值守</li>
          <li>应急资源</li>
          <li>汛前检查</li>
        </ul>
      </div>
    </div>
    <!-- <div class="body" v-drag>
      <div
        class="content"
        :style="
          button == true
            ? 'transform: rotate(360deg) scale(0.1);opacite:0.5;overflow: hidden;'
            : ''
        "
      >
        <div style="transition: 1s linear" class="content_item">
          <span class="item1">测距</span>
          <span class="item2">通讯录</span>
          <span class="item3">拨号</span>
          <span class="item4">统计</span>
          <span class="item5">清除</span>
          <span class="item6">测面</span>
          <span class="item7">调度</span>
          <span class="item8">圈选</span>
        </div>
      </div>
      <img
        src="http://3d.kuxia.top/assets/fixeBg.fc9c1243.png"
        class="button"
        alt=""
        @click="change"
      />
      <img
        src="	http://3d.kuxia.top/assets/fixeBoreder.b01fb55a.png"
        class="circle"
        :style="button == true ? 'transform: rotate(360deg);' : ''"
      />
    </div> -->
    <div class="right-nav">
      <ul>
        <li class="lists">
          <img src="../assets/预警.png" alt="" />
          <label class="txt2">预警</label>
        </li>
        <li class="lists">
          <img src="../assets/雨水情.png" alt="" />
          <label class="txt2">雨水情</label>
        </li>
        <li class="lists">
          <img src="../assets/监控.png" alt="" />
          <label class="txt2">监控</label>
        </li>
        <li class="lists" @click="rain">
          <img src="../assets/雨量.png" alt="" />
          <label class="txt2">雨量</label>
        </li>
        <li class="lists">
          <img src="../assets/台风.png" alt="" />
          <label class="txt2">台风</label>
        </li>
        <li class="lists">
          <img src="../assets/雷达.png" alt="" />
          <label class="txt2">雷达</label>
        </li>
        <li class="lists">
          <img src="../assets/云图.png" alt="" />
          <label class="txt2">云图</label>
        </li>
        <li class="lists">
          <img src="../assets/风速.png" alt="" />
          <label class="txt2">风速</label>
        </li>
      </ul>
    </div>
    <div class="right_rains" v-if="right_rain">
      <p class="title">
        <img
          class="imgBg"
          src="http://3d.kuxia.top/assets/popAllTitle.7d95bd81.png"
          alt=""
        />
        雨量
        <img
          src="../assets/叉号.png"
          style="width: 30px; height: 30px; margin-top: 2%; z-index: 8"
          alt=""
          @click="closes"
        />
      </p>
      <div class="rains_content">
        <div class="check_box">
          <div class="tab_check">
            <div class="check" @click="left">
              <i class="xuan"></i>
              <label>站点雨量排名</label>
            </div>
            <div class="left_all" v-if="leftAll">
              <div class="rank">
                <el-date-picker
                  class="el_inp"
                  v-model="value1"
                  type="datetime"
                  placeholder="请选择时间"
                />
                <el-button @click="yuBut">实时降雨</el-button>
              </div>
              <div>
                <div class="small_but">
                  <el-button @click="yuBut">近1h降雨</el-button>
                  <el-button @click="yuBut">近3h降雨</el-button>
                  <el-button @click="yuBut">近6h降雨</el-button>
                </div>
                <div class="small_but">
                  <el-button @click="yuBut">近12h降雨</el-button>
                  <el-button @click="yuBut">近24h降雨</el-button>
                  <el-button @click="yuBut">近72h降雨</el-button>
                </div>
                <div class="small_but">
                  <div class="list_but">
                    <p>全区降雨量</p>
                    <p>162mm</p>
                  </div>
                  <div class="list_but">
                    <p>单站最大</p>
                    <p>32mm</p>
                  </div>
                </div>
                <div class="vue_echarts">
                  <div class="list_echarts">
                    <label class="txt">辉县市</label>
                    <span class="line">
                      <label :style="{ width: echartsd }"></label>
                    </span>
                    <label class="val">{{ echartsd }}</label>
                  </div>
                  <div class="list_echarts">
                    <label class="txt">新乡市</label>
                    <span class="line">
                      <label :style="{ width: echarts }"></label>
                    </span>
                    <label class="val">{{ echarts }}</label>
                  </div>
                  <div class="list_echarts">
                    <label class="txt">红旗区</label>
                    <span class="line">
                      <label :style="{ width: echartst }"></label>
                    </span>
                    <label class="val">{{ echartst }}</label>
                  </div>
                </div>
                <div class="small_but">
                  <el-button>1公里</el-button>
                  <el-button>3公里</el-button>
                  <el-button>6公里</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="tab_check">
            <div class="check" @click="right">
              <i class="xuan"></i>
              <label>乡镇雨量排名</label>
            </div>
            <div class="yuArrs" v-if="rightAll">
              <el-table
                :data="yuliang"
                height="400"
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#000',
                  color: '#fff',
                }"
                :cell-style="{ 'text-align': 'center' }"
                style="width: 100%"
              >
                <el-table-column prop="num" label="排名" width="122.5" />
                <el-table-column prop="xiang" label="乡镇" width="122.5" />
                <el-table-column prop="yu" label="雨量(mm)" width="122.5" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, getCurrentInstance } from "vue";
import maplist from "/vue可视化/floor/public/maplist.json";
import huixian from "/vue可视化/floor/public/huixian.json";
import weihui from "/vue可视化/floor/public/weihui.json";
import huojia from "/vue可视化/floor/public/huojia.json";
import xinxiangxian from "/vue可视化/floor/public/xinxiangxian.json";
import yuanyang from "/vue可视化/floor/public/yuanyang.json";
import fengqiu from "/vue可视化/floor/public/fengqiu.json";
import changyuan from "/vue可视化/floor/public/changyuan.json";
import yanjin from "/vue可视化/floor/public/yanjin.json";
import hongqi from "/vue可视化/floor/public/hongqi.json";
import weibin from "/vue可视化/floor/public/weibin.json";
import fengquan from "/vue可视化/floor/public/fengquan.json";
import muye from "/vue可视化/floor/public/muye.json";
import yuliang from "/vue可视化/floor/public/yuliang.json";
export default {
  setup() {
    onMounted(() => {
      initwxMap();
    });
    //右侧功能-----雨量........................................
    var right_rain = ref(false);
    let rain = () => {
      console.log(yuliang);
      right_rain.value = true;
      // let points = [];
      // huixian[1].forEach((item, index) => {
      //   points.push(new T.LngLat(item[0], item[1]));
      // });
      // //创建面对象
      // let polygon = new T.Polygon(points, {
      //   color: "blue",
      //   weight: 3,
      //   opacity: 0.5,
      //   fillColor: "red",
      //   fillOpacity: 0.5,
      // });
      // //向地图上添加面
      // wxMap.addOverLay(polygon);
      //创建图片对象
    };
    const value1 = ref("");
    const leftAll = ref(true);
    let left = () => {
      leftAll.value = true;
      rightAll.value = false;
    };
    const rightAll = ref(false);
    let right = () => {
      rightAll.value = true;
      leftAll.value = false;
    };
    let closes = () => {
      right_rain.value = false;
    };
    let echarts = ref(`${Math.floor(Math.random() * 100)}%`);
    let echartst = ref(`${Math.floor(Math.random() * 100)}%`);
    let echartsd = ref(`${Math.floor(Math.random() * 100)}%`);
    var yuBut = () => {
      echarts.value = `${Math.floor(Math.random() * 100)}%`;
      echartst.value = `${Math.floor(Math.random() * 100)}%`;
      echartsd.value = `${Math.floor(Math.random() * 100)}%`;
      var icon = new T.Icon({
        iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
        iconSize: new T.Point(19, 27),
        iconAnchor: new T.Point(10, 56),
      });
      var yuArr = [
        [113.65906, 35.43718],
        [113.80737, 35.57021],
        [114.08066, 35.41256],
        [114.19601, 35.18391],
        [113.97903, 35.07609],
        [113.79776, 35.22431],
      ];
      yuArr.forEach((item, index) => {
        var marker = new T.Marker(new T.LngLat(item[0], item[1]), {
          icon: icon,
        });
        wxMap.addOverLay(marker);
        addwindowclick(marker, index);
      });
    };
    let addwindowclick = (marker, i) => {
      marker.addEventListener("click", function (e) {
        Longitude.value = marker.or.lng;
        Latitude.value = marker.or.lat;
        wxMap.centerAndZoom(
          new T.LngLat(Longitude.value, Latitude.value),
          zoom.value
        );
        var point = e.lnglat;
        // 创建信息窗口对象
        var markerInfoWin = new T.InfoWindow();
        var sContent = `
				<div id="win_box" style="height: auto; ">
					<table style=" width:300px;border-collapse: separate;font-size:14px;border-spacing:0 6px;table-layout:fixed;">
						<caption style="font-weight:bold;font-size:15px;">区域</caption>
						<tr><td style=" width: 30%;font-weight:bold;text-align:left;">巡查责任人:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></td></tr>
						<div class="echartsDiv">
              
            </div>
					</table>
				</div>
				`;
        //设置信息窗口要显示的内容
        markerInfoWin.setContent(sContent);
        //setOffset设置信息浮窗显示时向右下角偏移量（像素）。-30则代表向上偏移
        markerInfoWin.setOffset(new T.Point(0, -30));
        //开启信息窗口
        wxMap.openInfoWindow(markerInfoWin, point);
      });
    };
    //右侧功能-----预警........................................

    // 地图
    var wxMap = ref({});
    var zoom = ref(10);
    var Longitude = ref(113.9848);
    var Latitude = ref(35.28329);
    var initwxMap = () => {
      var T = window.T;
      wxMap = new T.Map("map");
      wxMap.centerAndZoom(
        new T.LngLat(Longitude.value, Latitude.value),
        zoom.value
      );
      wxMap.setMapType(TMAP_SATELLITE_MAP);
      // 遮罩层
      var points = [];
      points.push(new T.LngLat(219.375, 84.87835));
      points.push(new T.LngLat(10.19531, 84.9778));
      points.push(new T.LngLat(10.19531, 11.04041));
      points.push(new T.LngLat(222.1875, 8.75479));

      var points1 = [];
      maplist.forEach((item, index) => {
        points1.push(new T.LngLat(item[0], item[1]));
      });
      //创建面对象
      var polygon = new T.Polygon([points, points1], {
        color: "black",
        weight: 3,
        opacity: 0.2,
        fillColor: "blue",
        fillOpacity: 0.3,
      });
      //向地图上添加面
      wxMap.addOverLay(polygon);
      // 辉县区域线条.......................................................
      var pointshui = [];
      huixian[1].forEach((item, index) => {
        pointshui.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var line = new T.Polyline(pointshui, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(line);
      var hui = new T.Label({
        text: "辉",
        position: new T.LngLat(113.61017, 35.50048),
        offset: new T.Point(-20, 0),
      });
      var xian = new T.Label({
        text: "县",
        position: new T.LngLat(113.71179, 35.50048),
        offset: new T.Point(-20, 0),
      });
      var huixianshis = new T.Label({
        text: "市",
        position: new T.LngLat(113.81342, 35.50048),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(hui);
      wxMap.addOverLay(xian);
      wxMap.addOverLay(huixianshis);
      // 卫辉市区域线条.......................................................
      var pointshuis = [];
      weihui[1].forEach((item, index) => {
        pointshuis.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linewei = new T.Polyline(pointshuis, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linewei);
      var wei = new T.Label({
        text: "卫",
        position: new T.LngLat(114.01254, 35.46022),
        offset: new T.Point(-20, 0),
      });
      var huis = new T.Label({
        text: "辉",
        position: new T.LngLat(114.09082, 35.46022),
        offset: new T.Point(-20, 0),
      });
      var weihuishis = new T.Label({
        text: "市",
        position: new T.LngLat(114.16384, 35.46022),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(wei);
      wxMap.addOverLay(huis);
      wxMap.addOverLay(weihuishis);
      // 获嘉区域线条.......................................................
      var pointshuo = [];
      huojia[1].forEach((item, index) => {
        pointshuo.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linehuo = new T.Polyline(pointshuo, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linehuo);
      var huo = new T.Label({
        text: "获",
        position: new T.LngLat(113.66098, 35.24854),
        offset: new T.Point(-20, 0),
      });
      var jia = new T.Label({
        text: "嘉",
        position: new T.LngLat(113.66098, 35.17897),
        offset: new T.Point(-20, 0),
      });
      var huojiaxians = new T.Label({
        text: "县",
        position: new T.LngLat(113.66098, 35.11047),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(huo);
      wxMap.addOverLay(jia);
      wxMap.addOverLay(huojiaxians);
      // 新乡县区域线条.......................................................
      var xinxiangxians = [];
      xinxiangxian[1].forEach((item, index) => {
        xinxiangxians.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linexin = new T.Polyline(xinxiangxians, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linexin);
      var xin = new T.Label({
        text: "新",
        position: new T.LngLat(113.77565, 35.18907),
        offset: new T.Point(-20, 0),
      });
      var xiang = new T.Label({
        text: "乡",
        position: new T.LngLat(113.83607, 35.18907),
        offset: new T.Point(-20, 0),
      });
      var xinxiangxianx = new T.Label({
        text: "县",
        position: new T.LngLat(113.89513, 35.18907),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(xin);
      wxMap.addOverLay(xiang);
      wxMap.addOverLay(xinxiangxianx);
      // 原阳县区域线条.......................................................
      var yuanyangs = [];
      yuanyang[1].forEach((item, index) => {
        yuanyangs.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var lineyuan = new T.Polyline(yuanyangs, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(lineyuan);
      var yuan = new T.Label({
        text: "原",
        position: new T.LngLat(113.81561, 35.01031),
        offset: new T.Point(-20, 0),
      });
      var yang = new T.Label({
        text: "阳",
        position: new T.LngLat(113.9756, 35.01031),
        offset: new T.Point(-20, 0),
      });
      var yuanyangx = new T.Label({
        text: "县",
        position: new T.LngLat(114.13628, 35.01031),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(yuan);
      wxMap.addOverLay(yang);
      wxMap.addOverLay(yuanyangx);
      // 封丘县区域线条.......................................................
      var fengqius = [];
      fengqiu[1].forEach((item, index) => {
        fengqius.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linefeng = new T.Polyline(fengqius, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linefeng);
      var feng = new T.Label({
        text: "封",
        position: new T.LngLat(114.35532, 35.01031),
        offset: new T.Point(-20, 0),
      });
      var qiu = new T.Label({
        text: "丘",
        position: new T.LngLat(114.45557, 35.01031),
        offset: new T.Point(-20, 0),
      });
      var fengqiux = new T.Label({
        text: "县",
        position: new T.LngLat(114.55582, 35.01031),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(feng);
      wxMap.addOverLay(qiu);
      wxMap.addOverLay(fengqiux);
      // 长垣市区域线条.......................................................
      var changyuans = [];
      changyuan[1].forEach((item, index) => {
        changyuans.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linechang = new T.Polyline(changyuans, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linechang);
      var chang = new T.Label({
        text: "长",
        position: new T.LngLat(114.60539, 35.21017),
        offset: new T.Point(-20, 0),
      });
      var yuans = new T.Label({
        text: "垣",
        position: new T.LngLat(114.70633, 35.21017),
        offset: new T.Point(-20, 0),
      });
      var changyuanss = new T.Label({
        text: "市",
        position: new T.LngLat(114.80589, 35.21017),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(chang);
      wxMap.addOverLay(yuans);
      wxMap.addOverLay(changyuanss);
      // 延津县区域线条.......................................................
      var yanjins = [];
      yanjin[1].forEach((item, index) => {
        yanjins.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var lineyan = new T.Polyline(yanjins, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(lineyan);
      var yan = new T.Label({
        text: "延",
        position: new T.LngLat(114.11087, 35.24001),
        offset: new T.Point(-20, 0),
      });
      var jin = new T.Label({
        text: "津",
        position: new T.LngLat(114.19052, 35.24001),
        offset: new T.Point(-20, 0),
      });
      var yanjinx = new T.Label({
        text: "县",
        position: new T.LngLat(114.27155, 35.24001),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(yan);
      wxMap.addOverLay(jin);
      wxMap.addOverLay(yanjinx);
      // 红旗区区域线条.......................................................
      var hongqis = [];
      hongqi[1].forEach((item, index) => {
        hongqis.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linehong = new T.Polyline(hongqis, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linehong);
      var hong = new T.Label({
        text: "红",
        position: new T.LngLat(113.93234, 35.2898),
        offset: new T.Point(-20, 0),
      });
      var qi = new T.Label({
        text: "旗",
        position: new T.LngLat(113.97079, 35.2898),
        offset: new T.Point(-20, 0),
      });
      var hongqiqu = new T.Label({
        text: "区",
        position: new T.LngLat(114.01062, 35.2898),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(hong);
      wxMap.addOverLay(qi);
      wxMap.addOverLay(hongqiqu);
      // 渭滨区区域线条.......................................................
      var weibins = [];
      weibin[1].forEach((item, index) => {
        weibins.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linebin = new T.Polyline(weibins, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linebin);
      var weib = new T.Label({
        text: "卫",
        position: new T.LngLat(113.83209, 35.30213),
        offset: new T.Point(-20, 0),
      });
      var bin = new T.Label({
        text: "滨",
        position: new T.LngLat(113.85818, 35.27522),
        offset: new T.Point(-20, 0),
      });
      var weibinqu = new T.Label({
        text: "区",
        position: new T.LngLat(113.88153, 35.24943),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(weib);
      wxMap.addOverLay(bin);
      wxMap.addOverLay(weibinqu);
      // 凤泉区区域线条.......................................................
      var fengquans = [];
      fengquan[1].forEach((item, index) => {
        fengquans.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linequan = new T.Polyline(fengquans, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linequan);
      var fengq = new T.Label({
        text: "凤",
        position: new T.LngLat(113.81149, 35.35142),
        offset: new T.Point(-20, 0),
      });
      var quan = new T.Label({
        text: "泉",
        position: new T.LngLat(113.86093, 35.36934),
        offset: new T.Point(-20, 0),
      });
      var fengquanqu = new T.Label({
        text: "区",
        position: new T.LngLat(113.91037, 35.39062),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(fengq);
      wxMap.addOverLay(quan);
      wxMap.addOverLay(fengquanqu);
      // 牧野区区域线条.......................................................
      var muyes = [];
      muye[1].forEach((item, index) => {
        muyes.push(new T.LngLat(item[0], item[1]));
      });
      //创建线对象
      var linemu = new T.Polyline(muyes, {
        color: "#02DDFE",
        weight: 1.5,
      });
      //向地图上添加线
      wxMap.addOverLay(linemu);
      var mu = new T.Label({
        text: "牧",
        position: new T.LngLat(113.88153, 35.34022),
        offset: new T.Point(-20, 0),
      });
      var ye = new T.Label({
        text: "野",
        position: new T.LngLat(113.92136, 35.3402),
        offset: new T.Point(-20, 0),
      });
      var muyequ = new T.Label({
        text: "区",
        position: new T.LngLat(113.96255, 35.3402),
        offset: new T.Point(-20, 0),
      });
      //创建地图文本对象
      wxMap.addOverLay(mu);
      wxMap.addOverLay(ye);
      wxMap.addOverLay(muyequ);
    };

    let time = (date) => {
      return `${date.getFullYear()}-${
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1
      }-${date.getDate()} ${
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
      }:${
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
      }:${
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
      }`;
    };
    const d = ref("");
    setInterval(() => {
      d.value = time(new Date());
    }, 1000);
    var button = ref(true);
    var change = () => {
      button.value = !button.value;
    };
    return {
      initwxMap,
      zoom,
      Longitude,
      Latitude,
      time,
      d,
      maplist,
      change,
      button,
      right_rain,
      rain,
      value1,
      leftAll,
      rightAll,
      left,
      right,
      yuliang,
      closes,
      echarts,
      echartst,
      echartsd,
      yuBut,
    };
  },
  directives: {
    drag(el, bindings) {
      el.onmousedown = function (e) {
        var disx = e.pageX - el.offsetLeft;
        var disy = e.pageY - el.offsetTop;
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disx + "px";
          el.style.top = e.pageY - disy + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
  },
};
</script>

<style scoped>
@import "../assets/css/map.css";
</style>